import React, { useCallback } from 'react'
import List from '@/components/list/List'
import useLoadData from '@/hooks/useLoadData'
import {
  HotShowWrapper,
  HotShowH1
} from './styledHome'

export default function HotShow() {  
  const data = useLoadData('/hotshow')

  const renderItem = useCallback(
    item => {
      return (
        <div className="item">
          <img src={item.img} alt="" />
          <HotShowH1>{item.name}</HotShowH1>
          <span>{item.cate}</span>
        </div>
      )
    },
    [],
  )

  return (
    <HotShowWrapper>
      <List
        title="热门演出"
        data={data}
        renderItem={renderItem}
      ></List>
    </HotShowWrapper>
  )
}